<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>银行系统 - 账户管理</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h2 {
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f5f5f5;
}

button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
</style>
</head>
<body>
    <h2>账户管理</h2>
    
    <button onclick="openCreateAccountModal()">创建新账户</button>
    
    <div id="createAccountModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeCreateAccountModal()">&times;</span>
            <h3>创建新账户</h3>
            <form id="createAccountForm">
                <div class="form-group">
                    <label for="initialBalance">初始存款：</label>
                    <input type="text" id="initialBalance" name="initialBalance" required>
                </div>
                <button type="button" onclick="createAccount()">提交</button>
            </form>
        </div>
    </div>
    <table>
        <tr>
            <th>账户ID</th>
            <th>账户号码</th>
            <th>余额</th>
            <th>创建时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!-- 使用JSTL遍历账户列表 -->
        <c:if test="${not empty accounts}">
            <c:forEach items="${accounts}" var="accounts">
                <tr>
                    <td>${accounts.id}</td>
                    <td>${accounts.accountNumber}</td>
                    <td>${accounts.balance}</td>
                    <td>${accounts.createTime}</td>
                    <td>${accounts.status == 1 ? "正常" : "冻结"}</td>
                    <td>
                        <button onclick="freezeAccount(${accounts.id})">${accounts.status == 1 ? "冻结" : "解冻"}</button>
                    </td>
                </tr>
            </c:forEach>
        </c:if>
        <c:if test="${empty accounts}">
            <tr>
                <td colspan="6">暂无账户信息</td>
            </tr>
        </c:if>
    </table>
    
    <script>
    function openCreateAccountModal() {
        document.getElementById("createAccountModal").style.display = "block";
    }
    
    function closeCreateAccountModal() {
        document.getElementById("createAccountModal").style.display = "none";
    }
    
    function createAccount() {
        var initialBalance = document.getElementById("initialBalance").value;
        
        // 使用AJAX提交表单
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "createAccount", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert(xhr.responseText);
                location.reload();
            }
        };
        xhr.send("initialBalance=" + initialBalance);
        
        closeCreateAccountModal();
    }
    
    function freezeAccount(accountId) {
        if (confirm("确定要执行此操作吗？")) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "freezeAccount", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    alert(xhr.responseText);
                    location.reload();
                }
            };
            xhr.send("accountId=" + accountId);
        }
    }
    </script>
</body>
</html>